<template>
	<view class="container">
		<s-list-view title="基础资料" :size="38">
			<view class="input-box">
				<view class="input-item">
					<view class="input-title">昵称</view>
					<view class="input-content">
						<input type="text" maxlength="20" placeholder="请输入昵称" placeholder-class="input-class">
					</view>
				</view>
				<view class="input-item">
					<view class="input-title">性别</view>
					<view class="input-content">
						<picker @change="bindSexChange" :value="sex" :range="sexArray">
							<view class="sex-box">
								<view class="sex-text">{{sexArray[sex]}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				<view class="input-item">
					<view class="input-title">生日</view>
					<view class="input-content">
						<view class="sex-box" @click="dateOfBirthClick">
							<view class="sex-text">{{date_of_birth?date_of_birth:'未知'}}</view>
							<s-icon name="arrowright" size="22"></s-icon>
						</view>
					</view>
				</view>
			
			
				<view class="input-item">
					<view class="input-title">身高</view>
					<view class="input-content">
						<picker @change="bindHeightChange" :value="height" :range="heightArray" range-key="name">
							<view class="sex-box">
								<view class="sex-text">{{heightArray[height].name}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				
				
				<view class="input-item">
					<view class="input-title">居住城市</view>
					<view class="input-content">
						<view class="sex-box"  @click="selectAddr">
							<view class="sex-text">{{addess?addess:'未知'}}</view>
							<s-icon name="arrowright" size="22"></s-icon>
						</view>
					</view>
				</view>
				
				
				<view class="input-item">
					<view class="input-title">婚姻状况</view>
					<view class="input-content">
						<picker @change="bindMaritalStatusChange" :value="marital_status" :range="maritalStatusArray">
							<view class="sex-box">
								<view class="sex-text">{{maritalStatusArray[marital_status]}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				
				
				<view class="input-item">
					<view class="input-title">脱单目标</view>
					<view class="input-content">
						<picker @change="offOrderTargetChange" :value="off_order_target" :range="offOrderTargetArray" range-key="name">
							<view class="sex-box">
								<view class="sex-text">{{offOrderTargetArray[off_order_target].name}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				<!--  -->
				
			</view>
		</s-list-view>
		
		
		<s-list-view title="个人信息" :size="38">
			<view class="input-box">
				<view class="input-item">
					<view class="input-title">行业/职业</view>
					<view class="input-content">
						<picker @change="industryOccupationChange" :value="industry_occupation" :range="industryOccupationArray" range-key="name">
							<view class="sex-box">
								<view class="sex-text">{{industryOccupationArray[industry_occupation].name}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				
				
				
				<view class="input-item">
					<view class="input-title">年薪</view>
					<view class="input-content">
						<picker @change="annualSalaryChange" :value="annual_salary" :range="annualSalaryArray" range-key="name">
							<view class="sex-box">
								<view class="sex-text">{{annualSalaryArray[annual_salary].name}}</view>
								<s-icon name="arrowright" size="22"></s-icon>
							</view>
							
						</picker>
					</view>
				</view>
				
				<view class="input-item">
					<view class="input-title">微信</view>
					<view class="input-content">
						<input type="text" maxlength="20" placeholder="请输入微信" placeholder-class="input-class">
					</view>
				</view>
				
			</view>	
			
			
		</s-list-view>
		<view class="sub-btn">
			<s-button width="80%" bold shape="circle" margin="0 auto" :loading="true">提交</s-button>
		</view>
		
		
		
		<s-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :setDateTime="date_of_birth" @confirm="setDateOfBirth"></s-datetime>
		
		
		<s-bottom-popup :show="show" backgroundColor="transparent" @close="close">
			<view class="s-header">
				<view>请选择居住城市</view>
				<icon type="clear" :size="16" color="#c0c0c0" class="s-icon-close" @tap="close"></icon>
			</view>
			<s-cascade-selection :size="26" :textSize="24" :itemList="itemList" :reset="reset" @complete="complete3"></s-cascade-selection>
		</s-bottom-popup>
	</view>
</template>

<script>
	import cityData from '@/utils/picker.city.js';
	export default { 
		data() {
			return {
				 sexArray: ['未知', '男', '女'],
				 sex: 0, // 性别
				 maritalStatusArray: ['未知', '未婚', '已婚'],
				 marital_status:0,// 婚姻状况
				
				 
				 
				 addess:'',//地址
				 heightArray: [
					 {
						 "id":1,
						 "name":"未知",
						 "value":"0"
					 },
					 {
						 "id":2,
						 "name":"160cm",
						 "value":"160"
					 },
					 {
						 "id":3,
						 "name":"170cm",
						 "value":"170"
					 },
					 {
						 "id":4,
						 "name":"180cm",
						 "value":"180cm"
					 },
				 ],
				height:0, //身高
				
				
				
				offOrderTargetArray: [
					 {
						 "id":1,
						 "name":"未知"
					 },
					 {
						 "id":2,
						 "name":"计划一年内结婚"
					 },
					 {
						 "id":3,
						 "name":"计划两年内结婚"
					 },
					 {
						 "id":4,
						 "name":"计划三年内结婚"
					 },
				 ],
				off_order_target:0,//脱单目标
				
				
				industryOccupationArray: [
					 {
						 "id":1,
						 "name":"未知"
					 },
					 {
						 "id":2,
						 "name":"IT/互联网"
					 },
					 {
						 "id":3,
						 "name":"金融/经济"
					 },
					 {
						 "id":4,
						 "name":"其他行业"
					 },
				 ],
				industry_occupation:0, // 行业/职业
				 
				 
				 
				 annualSalaryArray: [
					 {
						 "id":1,
						 "name":"未知"
					 },
					 {
						 "id":2,
						 "name":"10w以内"
					 },
					 {
						 "id":3,
						 "name":"10-20w"
					 },
					 {
						 "id":4,
						 "name":"20w-30w"
					 },
				 ],
				annual_salary:0, // 年薪
				 
				 
				 
				 date_of_birth: '',//出生日期
				 type: 2,
				 startYear: 1950,
				 endYear:  new Date().getFullYear(),
				
				
				
				
				itemList: cityData,
				reset: 0,
				show: false,
				
			}
		},
		methods: {
			bindSexChange(e) {
				this.sex = e.target.value
			},
			bindMaritalStatusChange(e) {
				this.marital_status = e.target.value
			},
			offOrderTargetChange(e) {
				this.off_order_target = e.target.value
			},
			industryOccupationChange(e){
				this.industry_occupation = e.target.value
			},
			bindHeightChange(e){
				this.height = e.target.value
			},
			annualSalaryChange(e){
				this.annual_salary = e.target.value
			},
			dateOfBirthClick() {
				this.$refs.dateTime.show();
			},
			setDateOfBirth(e) {
				this.date_of_birth = e.result;
			},
			selectAddr() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			complete3(e) {
				this.addess = e.text
				this.close();
				setTimeout(() => {
					//重置数据
					this.reset++;
				}, 300);
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "basicDataMe.scss";
</style>
